<template>
	<div class="editor">
        <quill-editor 
        	ref="myTextEditor"
          v-model="content"
          :options="editorOption">
        </quill-editor>
	</div>
</template>
<script>
  import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'

  Quill.register('modules/ImageExtend', ImageExtend)
	export default{
		components: {quillEditor},
		data(){
			return {
				content: "",
				editorOption: {  
          modules: {
            ImageExtend: {
              loading: true,
              name: 'file',
              action: "http://v21-adm.ifire.mobi/obs",
              response: (res) => {
              	console.log(res)
                return res.url
              }
            },
            toolbar: {
              container: container,
              handlers: {
                'image': function () {
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        },
			}
		},
		methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      }
    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quill
      },
    },
    mounted() {
      console.log('this is my editor', this.editor)
    },
		created () {
			this.editorOption = {
				
			}
    }

	}
</script>